<template>
  <div class="progress-ring">
    <svg width="120" height="120">
      <!-- 背景圆 -->
      <circle class="bg" cx="60" cy="60" r="50" />
      
      <!-- 动态进度圆 -->
      <circle 
        class="progress" 
        cx="60" 
        cy="60" 
        r="50"
        :stroke="color"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
      />
      
      <!-- 中心文字 -->
      <text x="60" y="65">{{ progress }}%</text>
    </svg>
    <div class="label">{{ title }}</div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: String,
  current: Number,
  target: Number,
  color: String
})

const circumference = 2 * Math.PI * 50 // 圆的周长 = 2πr
const progress = computed(() => 
  Math.round((props.current / props.target) * 100)
)
const offset = computed(() => 
  circumference - (circumference * progress.value / 100)
)
</script>